<div class="container search-bar-container" data-controller="search-bar" data-search-bar-placeholders-value="<%= placeholders.to_json %>" data-search-bar-option-labels-value="<%= option_labels.to_json %>">
  <%= form_tag("/search", method: "get", id: "search-box", class: "d-flex flex-column flex-sm-row gap-3 h-100 w-100 search-bar-form") do %>
    <div class="d-flex justify-content-center search-bar">
      <div class="select-wrapper" data-search-bar-target="selectWrapper">
        <button type="button" class="select-button" data-search-bar-target="selectButton" data-action="click->search-bar#toggleDropdown">
          <span data-search-bar-target="selectedOption"><%= option_labels[resource || RESOURCE_OPTIONS.first] %></span>
          <%= helpers.image_tag "svgs/dropdown_arrow.svg", class: "select-arrow", alt: "Dropdown arrow" %>
        </button>
        <div class="select-dropdown" data-search-bar-target="dropdown">
          <% RESOURCE_OPTIONS.each do |option| %>
            <div class="select-option <%= "active" if option == (resource || RESOURCE_OPTIONS.first) %>" data-value="<%= option %>" data-action="click->search-bar#selectOption">
              <%= option_labels[option] %>
            </div>
          <% end %>
        </div>
        <%= hidden_field_tag :resource, resource || RESOURCE_OPTIONS.first, data: { search_bar_target: "hiddenSelect" } %>
      </div>
      <%= text_field_tag :q, query, autocomplete: "off", class: "search-bar-input h-100", data: { search_bar_target: "input" } %>
      <button class="search-bar-button rounded-end" type="submit" name="button" value="Submit" aria-label="Search">
        <%= helpers.image_tag "svgs/search_icon.svg", alt: "Search Icon" %>
      </button>
    </div>
    <div class="d-flex justify-content-between gap-2">
              <div class="filters-container" data-controller="search-filters" data-search-filters-current-resource-value="<%= resource || RESOURCE_OPTIONS.first %>" data-action="search-bar:resource-changed@window->search-filters#updateFiltersForResource">
        <button type="button" class="filters-button" data-search-filters-target="button" data-action="click->search-filters#toggleDropdown">
          <%= filter_labels["button_text"] %>
        </button>
        <div class="filters-dropdown" data-search-filters-target="dropdown">
          <div class="filters-content">
            <!-- Project Filters -->
            <div class="project-filters <%= 'hidden' unless (resource || RESOURCE_OPTIONS.first) == 'Projects' %>" data-search-filters-target="projectFilters">
              <div class="filter-field">
                <label class="filter-label" for="filter_tag"><%= filter_labels["projects"]["tags"]["label"] %></label>
                <div class="tags-display" data-search-filters-target="tagsDisplay">
                  <% if current_filter_values["tag"].present? %>
                    <% current_filter_values["tag"].split(',').each do |tag| %>
                      <span class="tag-item">
                        <%= tag.strip %>
                        <button type="button" class="tag-remove" data-tag="<%= tag.strip %>" aria-label="Remove <%= tag.strip %>">×</button>
                      </span>
                    <% end %>
                  <% end %>
                </div>
                <div class="tag-input-container">
                  <input class="tag-input" type="text" placeholder="<%= filter_labels["projects"]["tags"]["placeholder"] %>" data-search-filters-target="tagInput">
                </div>
                <input type="hidden" name="tag" id="filter_tag" value="<%= current_filter_values["tag"] %>" data-search-filters-target="tagHidden">
              </div>
            </div>
            <!-- User Filters -->
            <div class="user-filters d-flex flex-column gap-2 <%= 'hidden' unless (resource || RESOURCE_OPTIONS.first) == 'Users' %>" data-search-filters-target="userFilters">
              <div class="filter-field">
                <label class="filter-label" for="filter_country"><%= filter_labels["users"]["country"]["label"] %></label>
                <div class="filter-select-wrapper">
                  <select class="filter-select" name="country" id="filter_country" data-search-filters-target="countrySelect">
                    <option value=""><%= filter_labels["users"]["country"]["placeholder"] %></option>
                    <% countries_for_search.each do |country| %>
                      <option value="<%= country[:code] %>" <%= 'selected' if current_filter_values["country"] == country[:code] %>><%= country[:name] %></option>
                      <% end %>
                    </select>
                    <%= helpers.image_tag "svgs/dropdown_arrow.svg", class: "filter-select-arrow", alt: "Dropdown arrow" %>
                </div>
                </div>
                <div class="filter-field">
                  <label class="filter-label" for="filter_institute"><%= filter_labels["users"]["institute"]["label"] %></label>
                  <input class="filter-input" type="text" name="institute" id="filter_institute" placeholder="<%= filter_labels["users"]["institute"]["placeholder"] %>" value="<%= current_filter_values["institute"] %>" data-search-filters-target="instituteInput">
                </div>
              </div>
              <!-- Actions: Clear + Apply -->
              <div class="filter-apply-container mt-2 ms-auto">
                <div class="filter-actions">
                  <button type="button" class="filter-clear-button" data-action="click->search-filters#clearFilters">
                    Clear
                  </button>
                  <button type="button" class="filter-apply-button" data-search-filters-target="applyButton" data-action="click->search-filters#applyFilters">
                    <%= filter_labels["apply_button_text"] %>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="sorting-container" data-controller="search-sorting" data-search-sorting-selected-sort-value="<%= sort_by %>" data-search-sorting-sort-direction-value="<%= sort_direction %>" data-search-sorting-all-options-value='<%= all_sorting_options.to_json %>' data-search-sorting-current-resource-value="<%= resource || RESOURCE_OPTIONS.first %>" data-action="search-bar:resource-changed@window->search-sorting#updateOptionsForResource">
          <div class="d-flex sorting-buttons justify-content-center h-100">
            <button type="button" data-search-sorting-target="sorting" data-action="click->search-sorting#toggleOptions">
              <span data-search-sorting-target="sortingText"><%= sort_by %></span>
              <%= helpers.image_tag "svgs/dropdown_arrow.svg", class: "select-arrow black-arrow", alt: "Dropdown arrow" %>
            </button>
            <button type="button" data-search-sorting-target="sortingDirection" data-action="click->search-sorting#toggleSortingDirection">
              <%= helpers.image_tag "svgs/sort_asc.svg", class: "sort-arrow", alt: "Sort ascending", data: { search_sorting_target: "ascIcon" } %>
              <%= helpers.image_tag "svgs/sort_desc.svg", class: "sort-arrow d-none", alt: "Sort descending", data: { search_sorting_target: "descIcon" } %>
            </button>
          </div>
          <ul class="sorting-options" data-search-sorting-target="optionsList">
          </ul>
          <%= hidden_field_tag :sort_by, sort_by, data: { search_sorting_target: "hiddenSortBy" } %>
          <%= hidden_field_tag :sort_direction, sort_direction, data: { search_sorting_target: "hiddenSortDirection" } %>
        </div>
      </div>
    <% end %>
  </div>
